<template>
  <div class="common-layout">
    <el-container class="main-content">
      <el-aside width="40%" class="left-content">
        <el-image src="src/assets/logo.png" style="width:95%;height:95%;"></el-image>
      </el-aside>
      <el-container class="right-content">
        <el-header class="headertitle">
          <!-- 实现登录和注册页面跳转 -->
           <router-link to="/login">登录</router-link><span> | </span>
           <router-link to="/register">注册</router-link>
        </el-header>
        <el-main class="form-content">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.main-content {
  margin:5% 25%;
  width:50%;
  padding: 20px;
  border-radius: 20px;
  border:1px solid #b1b1b1;
}
/* 左侧图片 */
.left-content {
  border-radius: 20px;
  margin:10px;
  padding: 10px;
}
/* 右侧内容 */
.right-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 20px;
}
/* 标题 */
.headertitle {
  margin:20px;
  padding:10px;
  font-size: 24px;
  font-weight: bold;
}
/* 路由组件展示 */
.form-content {
  margin:20px;
  font-size: 18px;
}
/* 重写路由组件的样式 */
a{
  text-decoration: none;
  color: #000000;
}
.router-link-exact-active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
</style>
